<script lang="ts" setup>
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet} from "@/util/request.js";
import {showMessage} from "@/util/message.js";
import {useRouter} from "vue-router";
import {ElMessageBox} from "element-plus";

const  refresh =inject('refresh')

//定义路由对象
const router = useRouter()
//查询活动列表对象
const userList = ref([])
//分页对象
const pageInfo = ref({})
//分页查询
const loadData = (current) => {
  //准备参数
  let params = {
    current: current,
    pageSize: 15
  }
  // 分页查询
  doGet('/api/user/pageList', params).then(resp => {
    // 判断是否查询成功
    if (resp.data.code === 200) {
      // 赋值
      userList.value = resp.data.data.list
      pageInfo.value.total = resp.data.data.total
      pageInfo.value.pageSize = resp.data.data.pageSize
    } else {
      // 提示
      showMessage('查询用户列表失败', resp.data.msg, 'error')
    }
  })
}
/*--------------------跳转-------------------*/
// 跳转详情页
const detail = (id) => {
  // 跳转
  router.push('/index/user/detail/' + id)
}
// 跳转编辑页
const edit = (id) => {
  // 跳转
  router.push('/index/user/edit/' + id)
}
//添加用户
const addUser = () => {
  // 跳转
  router.push('/index/user/add')
}

/*--------------------跳转-------------------*/

/*----------------------删除用户-----------------------------*/
const delUser = (id) => {
  // 确认删除
  ElMessageBox.confirm('确认删除该用户吗？').then(() => {
    // 删除
    doDelete('/api/user/batchDelete/' + id).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除用户成功', 'success')
        setTimeout(() => {
          //刷新页面
          /* location.reload();*/
          //返回上一页
          // router.go(0)
          refresh()
        }, 600)
      } else {
        // 提示
      }
    })
  })
}
/*----------------------删除用户-----------------------------*/

/*----------------------批量删除------------------------------*/
// 获取选中的用户id
let ids = []
const handlerSelectChange = (newSelection) => {
  ids = []
  newSelection.forEach(item => {
    ids.push(item.id)
  })
}
const delBatch = () => {
  // 判断是否选中
  if (ids.length<=0) {
    showMessage('请选择要删除的用户','warning')
    return
  }
  // 确认删除
  ElMessageBox.confirm('确认删除该用户吗？').then(() => {
    // 删除
    doDelete('/api/user/batchDelete/'+ ids,{}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除用户成功', 'success')
        setTimeout(() => {
          //返回上一页
          // router.go(0)
          refresh()
        }, 600)
      } else {
        // 提示
      }
    }).catch({})
  })
}
/*----------------------批量删除------------------------------*/
onMounted(() => {
  //查询用户列表
  loadData(1)
})

</script>

<template>
  <el-button type="primary" @click="addUser">添加用户</el-button>
  <el-button type="danger" @click="delBatch">批量删除</el-button>

  <el-table
      :data="userList"
      :border="true"
      @selection-change="handlerSelectChange"
      style="width: 100%">
    <el-table-column type="selection" width="60" align="center"/>
    <el-table-column label="序号" type="index" width="100" align="center"/>
    <el-table-column label="账号" property="loginAct" align="center"/>
    <el-table-column label="姓名" property="name" align="center"/>
    <el-table-column label="电话" property="phone" align="center"/>
    <el-table-column label="邮箱" property="email" align="center"/>
    <el-table-column label="创建时间" property="createTime" align="center"/>
    <el-table-column label="修改时间" property="editTime" align="center"/>
    <el-table-column label="操作" align="center">
      <!--编辑&详情&删除按钮-->
      <template #default="scope">
        <el-button type="success" size="small" @click="detail(scope.row.id)">详情</el-button>
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="delUser(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <el-pagination
      layout="prev, pager, next, jumper"
      :background="true"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      @change="loadData"/>

</template>

<style scoped>
.el-table {
  margin-top: 13px;
  margin-bottom: 10px;
}
</style>